{include file="public/adminhead"}

<div class="container-fluid" id="app">

  <div class="row">
    <div class="card">
      <div class="card-body">

        <form class="form-horizontal" action="#" method="post" enctype="multipart/form-data" onsubmit="return false;">

          <div class="form-group">
            <label class="col-xs-12" >预览</label>
            <div class="col-xs-12">
              <template v-for="(v,i) in form.suoluetu">
                <img :src="v" alt="" class="preimg">
                <i class="mdi mdi-close-octagon-outline Kclose" @click="del(v,i)"></i>
              </template>

            </div>
          </div>

          <div class="form-group">
            <label class="col-xs-12" >图片</label>
            <div class="col-xs-12">
              <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
              </button>
              <br>
              <span>
                批量上传前，请命名好您的每一张图片，系统会默认按照您的图片名称进行保存。
              </span>

              <span id="inputfiles">

              </span>
            </div>
          </div>


          <div class="form-group">
            <label class="col-xs-12" >图片介绍</label>
            <div class="col-xs-12">
              <textarea class="form-control" name="info" v-model="form.info" rows="6" placeholder="内容.."></textarea>
            </div>
          </div>

          <div class="form-group">
            <label class="col-xs-12">是否显示</label>
            <div class="col-xs-12">
              <div class="radio">
                <label>
                  <input type="radio" name="status" value="1" v-model="form.status">
                  是
                </label>
              </div>
              <div class="radio">
                <label >
                  <input type="radio" name="status" value="0" v-model="form.status">
                  否
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-xs-12">
              <button class="btn btn-primary" type="button" @click="sub()">提交</button>
            </div>
          </div>
        </form>

      </div>
    </div>
  </div>

</div>

{include file="public/afooter"}

<script>

  layui.use('upload', function(){
      var upload = layui.upload;

      //执行实例
      var uploadInst = upload.render({
          elem: '#test1' //绑定元素
          ,accept:'images'
          ,multiple:true
          ,drag:true
          ,url: "{:url('Upload/uploads')}" //上传接口
          ,done: function(res, index, upload){
              //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
              var item = this.item;
              app.form.img.push(res.data);
              app.form.name.push(res.oname);
              app.form.suoluetu.push(res.suoluetu);
              console.log(res);
          }
          ,error: function(){
              //请求异常回调
          }
      });
  });
  var app = new Vue({
      el: '#app',
      data: {
          form:{
              info:"",
              img:[],
              name:[],
              suoluetu:[],
              status:0
          }
      }
      ,methods: {
          sub: function () {

              var url = "{:url('AdminImages/piliang')}";
              var _self = this
              var formdata = this.form;
              console.log(_self.form);
              $.post(url,formdata,function (e) {
                  if(e.code == 200){
                      success("成功");

                      var index = parent.layer.getFrameIndex(window.name);
                      setTimeout(function(){parent.layer.close(index)}, 2000);
                      window.parent.location.reload();
                      console.log(_self.form);
                  }else {
                      error("失败");
                  }
              })
          },
          del:function(v,i){
              app.form.img.splice(i,1)
              app.form.name.splice(i,1)
          }

      },
      mounted:function(){
          //页面挂载需要运行的函数
      }
  })
</script>